<script setup>
import {
    Edit, Delete, Link, Download,
} from '@element-plus/icons-vue'
import axios from 'axios';
import { ref } from 'vue'
import { ElMessage, ElMessageBox, ElUpload, timeUnits, ElDatePicker } from 'element-plus'
import {
    addstaffservice, deletestaffservice, updatestaffservice, getAllservice
} from '@/api/marketing.js'

import {
    addstaffservice as addstaffserviceWeekly,
    deletestaffservice as deletestaffserviceWeekly,
    updatestaffservice as updatestaffserviceWeekly,
    getAllservice as getAllserviceWeekly
} from '@/api/weekellyReport.js'


//控制添加分类弹窗
const dialogVisible = ref(false)
const dialogVisible1 = ref(false)

//分页条数据模型
//const pageNum = ref(1)//当前页
const total = ref(20)//总条数
//const pageSize = ref(3)//每页条数
//文章分类数据模型

//定义变量，控制标题
const title = ref('')
const title1 = ref('')


const title2 = ref('上传附件')
//交通路线列表数据模型
const majors = ref([
    { id: 11 }, { id: 23 }
])

const weekly = ref([
    { id: 11 }, { id: 23 }
])

const formref = ref(null); //表单校验
//与后端交互的json数据
const pathmodel = ref({
    name: null,
    location: null,
    time: null
})

const pathmodel1 = ref({
    name: null,
    comment: null,
    time: null,
    remark: null
})

const findmodel = ref({
    pageNum: 1,
    pageSize: 5,
    str: ''
})

const findmodel1 = ref({
    pageNum: 1,
    pageSize: 5,
    str: ''
})



const stafflist = async () => {
    console.log(findmodel.value);
    let result = await getAllservice(findmodel.value);
    console.log("营销活动信息:" + result.data);
    total.value = result.data.total;
    majors.value = result.data.items;
}
const stafflist1 = async () => {
    console.log(findmodel.value);
    let result = await getAllserviceWeekly(findmodel1.value);

    total.value = result.data.total;

    weekly.value = result.data.items;

}

stafflist1();
stafflist();
//当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
    findmodel.value.pageSize = size;
    stafflist();
}
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
    findmodel.value.pageNum = num;
    stafflist();
}
//当每页条数发生了变化，调用此函数
const onSizeChange1 = (size) => {
    findmodel1.value.pageSize = size;
    stafflist1();
}
//当前页码发生变化，调用此函数
const onCurrentChange1 = (num) => {
    findmodel1.value.pageNum = num;
    stafflist1();
}



const cleardata = () => {
    findmodel.value.str = '';
    findmodel.value.pageNum = 1;
    stafflist();
}
const cleardata1 = () => {
    findmodel1.value.str = '';
    findmodel1.value.pageNum = 1;
    stafflist1();
}
//表单校验
const rules = {
    name: [
        { required: true, message: '请输入标题', trigger: 'blur' },
    ],
    location: [
        { required: true, message: '请输入类型', trigger: 'blur' },
    ],
    time: [
        { required: true, message: '请输入内容', trigger: 'blur' },
    ]
}

const rules1 = {
    name: [
        { required: true, message: '请输入周报名称', trigger: 'blur' },
    ],
    comment: [
        { required: true, message: '请输入内容', trigger: 'blur' },
    ],
    time: [
        { required: true, message: '请输入时间', trigger: 'blur' },
    ]
}


const add = () => {
    pathmodel.value.name = null
    pathmodel.value.location = null
    pathmodel.value.time = null
    dialogVisible.value = true
    title.value = '营销活动信息录入'
}
const add1 = () => {
    pathmodel1.value.name = null
    pathmodel1.value.comment = null
    pathmodel1.value.time = null
    pathmodel1.value.remark = null
    dialogVisible1.value = true
    title1.value = '周报录入'
}

const addstaff = async () => {
    console.log(pathmodel.value);
    formref.value.validate(async (valid) => {
        if (!valid) {
            ElMessage.error('信息填写不完整！');
        }
        else {
            let result = await addstaffservice(pathmodel.value);
            if (result.code == 0) {
                ElMessage.success("添加成功")
                dialogVisible.value = false;
                stafflist();
            }
            else ElMessage.error(result.message ? result.message : '添加失败')
        }
    });


}
const addstaff1 = async () => {
    console.log(pathmodel1.value);
    formref.value.validate(async (valid) => {
        if (!valid) {
            ElMessage.error('信息填写不完整！');
        }
        else {
            let result = await addstaffserviceWeekly(pathmodel1.value);
            if (result.code == 0) {
                ElMessage.success("添加成功")
                dialogVisible1.value = false;
                stafflist1();
            }
            else ElMessage.error(result.message ? result.message : '添加失败')
        }
    });


}


const updatestaff = async () => {
    console.log(pathmodel.value);

    formref.value.validate(async (valid) => {
        if (!valid) {
            ElMessage.error('信息填写不完整！');
        }
        else {
            let result = await updatestaffservice(pathmodel.value);
            if (result.code == 0) {
                ElMessage.success("修改成功")
                dialogVisible.value = false;
                stafflist();
            }
            else {
                ElMessage.error(result.message ? result.message : '修改失败')
            }
        }
    })
}

const updatestaff1 = async () => {
    console.log(pathmodel1.value);


    formref.value.validate(async (valid) => {
        if (!valid) {
            ElMessage.error('信息填写不完整！');
        }
        else {
            let result = await updatestaffserviceWeekly(pathmodel1.value);
            if (result.code == 0) {
                ElMessage.success("修改成功")
                dialogVisible1.value = false;
                stafflist1();
            }
            else {
                ElMessage.error(result.message ? result.message : '修改失败')
            }
        }
    })
}


//删除分类
const del = (row) => {
    ElMessageBox.confirm(
        '你确认删除该条专业信息吗？',
        '温馨提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            //用户点击了确认
            let result = await deletestaffservice(row.id)
            if (result.code != 0) ElMessage.error(result.message ? result.message : '删除失败')
            else ElMessage.success('删除成功')
            //再次调用getAllCategory，获取所有文章分类
            stafflist();
        })
        .catch(() => {
            //用户点击了取消
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })
}
const del1 = (row) => {
    ElMessageBox.confirm(
        '你确认删除该条专业信息吗？',
        '温馨提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            //用户点击了确认
            let result = await deletestaffserviceWeekly(row.id)
            if (result.code != 0) ElMessage.error(result.message ? result.message : '删除失败')
            else ElMessage.success('删除成功')
            //再次调用getAllCategory，获取所有文章分类
            stafflist1();
        })
        .catch(() => {
            //用户点击了取消
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })
}


//展示编辑弹窗
const showDialog = (row) => {
    title.value = '营销活动信息编辑';
    dialogVisible.value = true;
    //数据拷贝
    pathmodel.value.name = row.name;
    pathmodel.value.location = row.location;
    pathmodel.value.time = row.time;
    //扩展i的属性，将来需要传递给后台，完成分类的修改
    pathmodel.value.id = row.id;
}
const showDialog1 = (row) => {
    title1.value = '周报编辑';
    dialogVisible1.value = true;
    //数据拷贝
    pathmodel1.value.name = row.name;
    pathmodel1.value.comment = row.comment;
    pathmodel1.value.time = row.time;
    pathmodel1.value.remark = row.remark;
    //扩展i的属性，将来需要传递给后台，完成分类的修改
    pathmodel1.value.id = row.id;
}


const addorupdate = async () => {
    console.log(title.value);
    if (title.value == '营销活动信息录入') {
        addstaff();
    }
    else {
        updatestaff();
    }
}

const addorupdate1 = async () => {
    console.log(title1.value);
    if (title1.value == '周报录入') {
        addstaff1();
    }
    else {
        updatestaff1();
    }
}



const activeTab = ref('first'); // 当前激活的标签页
const handleTabClick = (tab) => {
    cleardata();
    cleardata1();
    stafflist();
    stafflist1();
};







</script>

<template>
    <el-card class="page-container">
        <el-tabs v-model="activeTab" @tab-click="handleTabClick">
            <el-tab-pane label="营销活动信息" name="first">
                <!-- 搜索表单 -->
                <el-form>
                    <el-form-item label="查询条件:">
                        <el-input v-model="findmodel.str" placeholder="请输入查询内容" style="width: 300px"></el-input>
                        <el-button type="primary" @click="stafflist" style="margin-left: 15px;">搜索</el-button>
                        <el-button @click="cleardata">重置</el-button>
                        <el-button type="primary" @click="add">新增</el-button>
                    </el-form-item>
                </el-form>
                <!-- 文章列表 -->
                <el-table :data="majors" style="width: 100%">
                    <el-table-column label="名称" prop="name"></el-table-column>
                    <el-table-column label="地点" prop="location"></el-table-column>
                    <el-table-column label="时间" prop="time"></el-table-column>
                    <el-table-column label="操作" width="200">
                        <template #default="{ row }">
                            <el-button :icon="Edit" circle plain type="primary" @click="showDialog(row)"></el-button>
                            <el-button :icon="Delete" circle plain type="danger" @click="del(row)"></el-button>
                        </template>
                    </el-table-column>
                    <template #empty>
                        <el-empty description="没有数据" />
                    </template>
                </el-table>
                <!-- 分页条 -->
                <el-pagination v-model:current-page="findmodel.pageNum" v-model:page-size="findmodel.pageSize"
                    :page-sizes="[5, 10, 15, 20]" layout="jumper, total, sizes, prev, pager, next" background
                    :total="total" @size-change="onSizeChange" @current-change="onCurrentChange"
                    style="margin-top: 20px; justify-content: flex-end" />
            </el-tab-pane>

            <!-- 周报表单 -->
            <el-tab-pane label="周报信息" name="second">
                <!-- 搜索表单 -->
                <el-form>
                    <el-form-item label="查询条件:">
                        <el-input v-model="findmodel1.str" placeholder="请输入查询内容" style="width: 300px"></el-input>
                        <el-button type="primary" @click="stafflist1" style="margin-left: 15px;">搜索</el-button>
                        <el-button @click="cleardata1">重置</el-button>
                        <el-button type="primary" @click="add1">新增</el-button>
                    </el-form-item>
                </el-form>
                <!-- 文章列表 -->
                <el-table :data="weekly" style="width: 100%">
                    <el-table-column label="名称" prop="name"></el-table-column>
                    <el-table-column label="内容" prop="comment"></el-table-column>
                    <el-table-column label="备注" prop="remark"></el-table-column>
                    <el-table-column label="时间" prop="time"></el-table-column>
                    <el-table-column label="操作" width="200">
                        <template #default="{ row }">
                            <el-button :icon="Edit" circle plain type="primary" @click="showDialog1(row)"></el-button>
                            <el-button :icon="Delete" circle plain type="danger" @click="del1(row)"></el-button>
                        </template>
                    </el-table-column>
                    <template #empty>
                        <el-empty description="没有数据" />
                    </template>
                </el-table>
                <!-- 分页条 -->
                <el-pagination v-model:current-page="findmodel1.pageNum" v-model:page-size="findmodel1.pageSize"
                    :page-sizes="[5, 10, 15, 20]" layout="jumper, total, sizes, prev, pager, next" background
                    :total="total" @size-change="onSizeChange1" @current-change="onCurrentChange1"
                    style="margin-top: 20px; justify-content: flex-end" />
            </el-tab-pane>



        </el-tabs>

    </el-card>

    <!-- 添加分类弹窗 -->
    <el-dialog v-model="dialogVisible" :title="title" width="35%">
        <el-form :model="pathmodel" ref="formref" :rules="rules" label-width="81px" style="padding-right: 30px">
            <el-row gutter="20">
                <el-col :span="12">
                    <el-form-item label="名称" prop="name">
                        <el-input v-model="pathmodel.name"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="地点" prop="location">
                        <el-input v-model="pathmodel.location"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="时间" prop="time">
                <el-date-picker v-model="pathmodel.time" type="datetime" placeholder="选择日期时间">
                </el-date-picker>
            </el-form-item>

        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="addorupdate"> 确认 </el-button>
            </span>
        </template>
    </el-dialog>


    <el-dialog v-model="dialogVisible1" :title="title1" width="35%">
        <el-form :model="pathmodel1" ref="formref" :rules="rules1" label-width="81px" style="padding-right: 30px">
            <el-row gutter="20">
                <el-col :span="12">
                    <el-form-item label="名称" prop="name">
                        <el-input v-model="pathmodel1.name"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span='12'>
                    <el-form-item label="时间" prop="time">
                        <el-date-picker v-model="pathmodel1.time" type="datetime" placeholder="选择日期时间" >
                        </el-date-picker>
                    </el-form-item>
                </el-col>

            </el-row>

            <el-form-item label="内容" prop="comment">
                <el-input type="textarea" :rows="4" v-model="pathmodel1.comment" style="width: 400px"></el-input>
            </el-form-item>

            
            <el-form-item label="备注" prop="remark">
                <el-input type="textarea" :rows="2" v-model="pathmodel1.remark" style="width: 400px"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible1 = false">取消</el-button>
                <el-button type="primary" @click="addorupdate1"> 确认 </el-button>
            </span>
        </template>
    </el-dialog>


</template>

<style lang="scss" scoped>
.page-container {
    min-height: 100%;
    box-sizing: border-box;

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}
</style>